<template>
  <div class="part4">
    <p>
      未使用自定义聚焦指令
      <input type="text" />
    </p>
    <p>
      使用自定义聚焦指令
      <input v-focus type="text" />
    </p>

    <p>文章发表时间</p>
    <div id="time">
      <dl>
        <div v-for="(item,index) in timeList" :key="index">
          <dt>发表时间{{item}}</dt>
          <dd v-time="item"></dd>
        </div>
      </dl>
    </div>

    <p>指令参数</p>
    <ol>
      <li>el：指令所绑定的元素，可以用来直接操作 DOM 。</li>
      <li>
        binding：一个对象，包含以下属性：
        <ul>
          <li>name：指令名，不包括 v- 前缀。</li>
          <li>value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。</li>
          <li>oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。</li>
          <li>expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。</li>
          <li>arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。</li>
          <li>modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。</li>
        </ul>
      </li>
      <li>vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。</li>
      <li>oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。</li>
    </ol>
    <br />

    <p>回调函数</p>
    <p>
      一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
      <ul>
        <li>bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</li>
        <li>inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。</li>
        <li>update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。</li>
        <li>componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。</li>
        <li>unbind：只调用一次，指令与元素解绑时调用。</li>
      </ul>
    </p>
  </div>
</template>

<script>
import { Time } from "../assets/js/time.js";
export default {
  name: "part4",
  props: {},
  directives: {
    focus: {
      inserted: function(ele) {
        ele.focus();
      }
    },
    time: {
      bind(el, binding) {
        console.log("binding", binding);
        console.log("el", el);
        //bind钩子函数,第一次绑定到元素上时调用，只调用一次;el:将要挂载的元素，
        el.innerHTML = Time.getFormatTime(binding.value); //binding:一个JavaScript对象，包含了一些属性
        el.__timeout__ = setInterval(function() {
          el.innerHTML = Time.getFormatTime(binding.value);
        }, 60000); //设置每分钟更新一次
      },
      unbind(el) {
        //解绑时调用，只调用一次
        clearInterval(el.__timeout__);
        delete el.__timeout__;
      }
    }
  },
  data() {
    return {
      currentTime: new Date().getTime(),
      timeList: [
        1503383301,
        1526970501,
        1533882501,
        1534894101,
        1534918101,
        1534918821,
        686219755822
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
